<template>
  <div class="admin-sider-pr">
    <a-tabs v-model="active" type="editable-card" @tabClick="tabClick">
      <a-tab-pane v-for="pane in tabList" :key="pane.path" :closable="pane.meta.title != '首页'" >
        <span slot="tab" >
          <a-icon type="fire" v-if="active == pane.path" theme="filled" />
          <a-icon type="fire" v-else />
          {{ pane.meta.title }}
        </span>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
export default {
  name: "AdminSiderBar",
  props: {
    tabList: {
      type: Array,
      default() {return []}
    },
    activeKey: {
      type: String,
      default: '/layout/home'
    }
  },
  watch: {
    activeKey(newVal) {
      this.active = newVal
    }
  },
  mounted() {
    this.active = this.$route.path;
  },
  data() {
    return {
      active: '/layout/home',
    };
  },
  methods: {
    callback(key) {
      console.log(key);
    },
    tabClick(item) {
      this.$router.push(item)
      console.log(item)
    },
    // onEdit(targetKey, action) {
    //   this[action](targetKey);
    // },
    // add() {
    //   const panes = this.panes;
    //   const activeKey = `newTab${this.newTabIndex++}`;
    //   panes.push({ title: 'New Tab', content: 'Content of new Tab', key: activeKey });
    //   this.panes = panes;
    //   this.activeKey = activeKey;
    // },
    // remove(targetKey) {
    //   let activeKey = this.activeKey;
    //   let lastIndex;
    //   this.panes.forEach((pane, i) => {
    //     if (pane.key === targetKey) {
    //       lastIndex = i - 1;
    //     }
    //   });
    //   const panes = this.panes.filter(pane => pane.key !== targetKey);
    //   if (panes.length && activeKey === targetKey) {
    //     if (lastIndex >= 0) {
    //       activeKey = panes[lastIndex].key;
    //     } else {
    //       activeKey = panes[0].key;
    //     }
    //   }
    //   this.panes = panes;
    //   this.activeKey = activeKey;
    // },
  },
}
</script>

<style scoped lang="less">
.admin-sider-pr{
  position: relative;
  //height: 22px;
  overflow: hidden;
  .admin-sider-so{
    position: absolute;
    overflow-x: auto;
    top: 0;
    right: 0;
    left: 0;
    .siber-scroll{
      text-align: left;
      white-space: nowrap;
      width: auto;
    }

  }
}
</style>